<!--
 * @Author: your name
 * @Date: 2021-12-20 14:12:31
 * @LastEditTime: 2021-12-20 14:12:32
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Desktop\自学\地球波纹\旋转相册.html
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
    /*添加透视*/
    perspective: 800px;
}
section{
    position: relative;
    width: 300px;
    height: 200px;
    margin: 100px auto;    
    transform-style: preserve-3d;
    animation: muma 6s linear infinite;
    
}
/*添加动画*/
@keyframes muma {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}
/*鼠标经过暂停*/
section:hover{
   animation-play-state:paused;
}
section div{
    /*给所有盒子添加绝对定位*/
   position: absolute;
   left: 0px;
   top: 0px;
    /* background: url(xiaoying.jpg) no-repeat; */
    width: 100%;
    height: 100%;
}
section div img{
    width: 100%;
    height: 100%;
}
section div:nth-child(1){
    transform: translateZ(300px);
}
section div:nth-child(2){
    /*让盒子先旋转在调整z轴的距离*/
    transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
    transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
    transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
    transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
    transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>

<body>
    <section>
        <div><img src="xiaoying.jpg"></div>
        <div><img src="xiaoying.jpg"></div>
        <div><img src="xiaoying.jpg"></div>
        <div><img src="xiaoying.jpg"></div>
        <div><img src="xiaoying.jpg"></div>
        <div><img src="xiaoying.jpg"></div>
        
        </section>
</body>
</html>
